<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>飞机射击游戏</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; width: 100vw; height: 100vh; }
    </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    // ========== 游戏配置 ==========
    const PLAYER_SPEED = 5;    // 玩家移动速度
    const BULLET_SPEED = 8;    // 子弹速度
    const ENEMY_SPAWN_RATE = 60; // 每60帧生成敌机
    const ENEMY_SPEED = 2;     // 敌机速度
    const FPS = 60;            // 逻辑帧率

    // ========== 初始化Canvas ==========
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    let width, height;

    function resizeCanvas() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    // ========== 玩家对象 ==========
    const player = {
        x: 0, y: 0,
        width: 40, height: 50,
        speed: PLAYER_SPEED,
        bullets: [],
        lives: 3,
        score: 0,

        init() {
            this.x = width / 2;
            this.y = height - this.height * 2;
            this.bullets = [];
        },

        draw() {
            // 绘制三角形飞机
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.beginPath();
            ctx.moveTo(0, -this.height/2);
            ctx.lineTo(-this.width/2, this.height/2);
            ctx.lineTo(this.width/2, this.height/2);
            ctx.closePath();
            ctx.fillStyle = '#3B82F6';
            ctx.fill();
            ctx.restore();
        },

        shoot() {
            this.bullets.push({
                x: this.x,
                y: this.y - this.height/2,
                speed: BULLET_SPEED
            });
        },

        move(direction) {
            if (direction === 'left' && this.x > 0) this.x -= this.speed;
            if (direction === 'right' && this.x < width) this.x += this.speed;
            if (direction === 'up' && this.y > 0) this.y -= this.speed;
            if (direction === 'down' && this.y < height) this.y += this.speed;
        }
    };

    // ========== 敌机管理 ==========
    const enemies = [];

    function spawnEnemy() {
        const size = 20 + Math.random() * 20;
        enemies.push({
            x: Math.random() * (width - size),
            y: -size,
            width: size,
            height: size,
            speed: ENEMY_SPEED + Math.random(),
            health: 2
        });
    }

    // ========== 碰撞检测 ==========
    function isColliding(a, b) {
        return a.x < b.x + b.width &&
               a.x + a.width > b.x &&
               a.y < b.y + b.height &&
               a.y + a.height > b.y;
    }

    // ========== 游戏循环 ==========
    let frame = 0;

    function gameLoop() {
        requestAnimationFrame(gameLoop);
        if (frame % FPS === 0) resizeCanvas();
        ctx.clearRect(0, 0, width, height);

        // 生成敌机
        frame++;
        if (frame % ENEMY_SPAWN_RATE === 0) spawnEnemy();

        // 绘制玩家
        player.draw();

        // 子弹逻辑
        for (let i = player.bullets.length - 1; i >= 0; i--) {
            const bullet = player.bullets[i];
            bullet.y -= bullet.speed;
            ctx.beginPath();
            ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI*2);
            ctx.fillStyle = '#FBBF24';
            ctx.fill();

            if (bullet.y < 0) {
                player.bullets.splice(i, 1);
                continue;
            }

            // 检测子弹碰撞敌机
            for (let j = enemies.length - 1; j >= 0; j--) {
                const enemy = enemies[j];
                if (isColliding(bullet, enemy)) {
                    enemy.health--;
                    player.bullets.splice(i, 1);
                    if (enemy.health <= 0) {
                        enemies.splice(j, 1);
                        player.score += 10;
                    }
                    break;
                }
            }
        }

        // 敌机逻辑
        for (let i = enemies.length - 1; i >= 0; i--) {
            const enemy = enemies[i];
            enemy.y += enemy.speed;
            ctx.fillStyle = '#EF4444';
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

            // 检测敌机碰撞玩家
            if (isColliding(enemy, player)) {
                enemies.splice(i, 1);
                player.lives--;
                if (player.lives <= 0) {
                    alert(`游戏结束！得分：${player.score}`);
                    resetGame();
                }
            }

            if (enemy.y > height) enemies.splice(i, 1);
        }

        // 绘制UI
        ctx.fillStyle = '#fff';
        ctx.font = '20px Arial';
        ctx.fillText(`得分：${player.score}`, 20, 30);
        ctx.fillText(`生命：${player.lives}`, 20, 60);
    }

    // ========== 重置游戏 ==========
    function resetGame() {
        player.init();
        enemies.length = 0;
        player.score = 0;
        player.lives = 3;
    }

    // ========== 键盘控制 ==========
    document.addEventListener('keydown', (e) => {
        switch(e.key) {
            case 'ArrowLeft': player.move('left'); break;
            case 'ArrowRight': player.move('right'); break;
            case 'ArrowUp': player.move('up'); break;
            case 'ArrowDown': player.move('down'); break;
            case ' ': player.shoot(); break; // 空格射击
        }
    });

    // ========== 启动游戏 ==========
    resetGame();
    gameLoop();
</script>
</body>
</html>